<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.dropbtn{
				background-color: red;
				color: white;
				padding: 16px;
				font-size: 16px;
				border: none;
				cursor: pointer;
			}
			.dropdown{
				position: relative;
				display: inline-block;
			}
			.dropdown-content{
				display: none;/*将内容隐藏*/
				position: absolute;
				background-color: #f9f9f9;
				min-width: 160px;
				box-shadow:0px 8px 16px 0px rgba(0,0,0,0,0.2);
			}
			.dropdown-content a{
				color: black;
				padding: 12px 16px;
				text-decoration: none;
				display: block;
			}
			.dropdown-content a:hover{
				background-color: #f1f1f1;
			}
			.dropdown:hover .dropdown-content{
				display: block;
				
			}
			.dropdown:hover .dropbtn{
				background-color: #388e41;
			}
		</style>
	</head>
	<body>
		<div class="dropdown" style="float: left;">
		  <button class="dropbtn">下拉菜单</button>
		  <div class="dropdown-content">
		    <a href="http://www.javascriptcn.com">JavaScript中文网 1</a>
		    <a href="http://www.javascriptcn.com">JavaScript中文网 2</a>
		    <a href="http://www.javascriptcn.com">JavaScript中文网 3</a>
		  </div>
		</div>
		<div class="dropdown" style="float: right;">
		  <button class="dropbtn">下拉菜单</button>
		  <div class="dropdown-content">
		    <a href="http://www.javascriptcn.com">JavaScript中文网 1</a>
		    <a href="http://www.javascriptcn.com">JavaScript中文网 2</a>
		    <a href="http://www.javascriptcn.com">JavaScript中文网 3</a>
		  </div>
		</div>
	</body>
</html>
